<template>
  <view class="modal-cheer" v-if="show">
    <view class="mask" @tap.stop="onTapHideModal"></view>
    <view class="modal-container animation-slide-bottom">
      <view class="modal-header bg-blue">
        <view class="modal-title" v-text="title"></view>
        <view class="modal-close" @tap="onTapHideModal"><uni-icons type="closeempty" size="26" color="#FFFFFF"></uni-icons></view>
      </view>
      <view class="modal-body bg-white">
        <view class="cheer-body-title" v-text="cheerTitle"></view>
        <view class="cheer-body-desc" v-text="cheerDesc"></view>
        <view class="grid col-4" style="margin: 0upx auto;">
          <view class="grid-item" v-for="(item, index) in gifts" :key="index">
            <view class="gift">
              <view class="gift-image"><image :src="item.img" mode="widthFix"></image></view>
              <view class="gift-flower">
                <view class="gift-flower-num" v-text="item.flower"></view>
                <view class="gift-flower-img"><image :src="IMAGES.ICON_MONEY_FLOWER" mode="widthFix"></image></view>
              </view>
              <view class="gift-input"><modal-input :values="giftInputValues" :min="0" v-model="item.input" :offAdd="isCanOffAdd(index)"></modal-input></view>
            </view>
          </view>
        </view>
        <view class="modal-body-cogs">
          <view class="cogs-infos">
            <view class="cogs-info">
              <view class="expect-label">预期获得奖励</view>
              <view class="expect-score">{{ expectScore | float2int }}积分</view>
            </view>
            <view class="cogs-info">
              <view class="expect-label">我的鲜花</view>
              <view class="expect-score">
                <text v-if="isUseWhiteStrip">{{ STATE.user.userInfo.flower + whiteStrip }}</text>
                <text v-else>{{ STATE.user.userInfo.flower }}</text>
                <text style="font-size: 24rpx;" v-if="isUseWhiteStrip">(含拿去花额度:{{ whiteStrip }})</text>
              </view>
            </view>
          </view>
          <view class="cogs-btn"><button class="cheer-btn" @click="onSubmitCheer">助威</button></view>
        </view>

        <view class="white-strip">
          <label @click="onChangeUseWhiteStrip">
            <checkbox class="round pink" :class="isUseWhiteStrip ? 'checked' : ''" :checked="isUseWhiteStrip" />
            <view class="text">
              <text>鲜花不足时，是否使用</text>
              <navigator url="/pages/credit/index">拿去花</navigator>
            </view>
          </label>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import credit from "@/api/modules/credit";
import modalInput from "@/components/cheer/modalInput";
import { uniIcons } from "@dcloudio/uni-ui";
import uniApp from "@/utils/uni-app";
export default {
  name: "cheerModal",
  components: {
    uniIcons,
    modalInput
  },
  data() {
    return {
      isUseWhiteStrip: true,
      whiteStrip: 0,
      giftInputValues: [0, 88, 166, 188, 566, 588, 666, 888],
      gifts: [
        {
          img: IMAGES.VIDEO_GIFT_01,
          flower: 1,
          input: 0
        },
        {
          img: IMAGES.VIDEO_GIFT_02,
          flower: 10,
          input: 0
        },
        {
          img: IMAGES.VIDEO_GIFT_03,
          flower: 100,
          input: 0
        },
        {
          img: IMAGES.VIDEO_GIFT_04,
          flower: 1000,
          input: 0
        }
      ]
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "购买礼物"
    },
    cheerTitle: String,
    cheerDesc: String,
    odd: {
      type: Object,
      required: true
    }
  },
  computed: {
    IMAGES: () => IMAGES,
    // 预期获得的积分
    expectScore() {
      if (!this.odd) return null;
      let flower = this.flowerTotal;
      return (flower * (this.odd.odd || this.odd.ori_odd) * this.$store.state.setting.config.flower2score).toFixed(2);
    },
    flowerTotal() {
      let flower = 0;
      for (let i in this.gifts) {
        flower = this.gifts[i].flower * this.gifts[i].input + flower;
      }
      return flower;
    }
  },
  watch:{
    show:{
      handler(n){
        if(!n) return;
        this.init()
      }
    }
  },
  methods: {
    init(){
      credit.info().then(_ => {
        this.whiteStrip = _.data.data.max - _.data.data.debt_num;
      });
      this.$store.dispatch("user/getUserInfo");
    },
    onTapHideModal() {
      this.$emit("update:show", false);
      this.$emit("event-close", this.odd || undefined);
    },
    /**
     * @param {Object} index 礼物类别
     */
    isCanOffAdd(index) {
      // 当前选择的数量索引
      let current = this.giftInputValues.indexOf(this.gifts[index].input);
      if (current >= this.giftInputValues.length - 1) return false;
      // 关联白条后的鲜花余额
      let myFlower = this.$store.state.user.userInfo.flower;
      if (this.isUseWhiteStrip) {
        myFlower += this.whiteStrip;
      }
      // 减去正在选择后的剩余的鲜花
      myFlower = myFlower - this.flowerTotal;
      
      // 到下一级需要的鲜花差额
      let nextFlower = (this.giftInputValues[current + 1] - this.giftInputValues[current]) * this.gifts[index].flower;
      return myFlower < nextFlower;
    },
    // 是否使用白条
    onChangeUseWhiteStrip() {
      this.isUseWhiteStrip = !this.isUseWhiteStrip;
      if (!this.isUseWhiteStrip && this.flowerTotal > 0) {
        // 重置选择
        let gifts = JSON.parse(JSON.stringify(this.gifts));
        for (let i in gifts) {
          console.warn(i);
          gifts[i].input = 0;
        }
        console.warn(gifts);
        this.gifts = gifts;
      }
    },
    onSubmitCheer() {
      if (!this.odd) return;
      if (!this.flowerTotal) {
        uniApp.toast("助威至少需要1朵鲜花哦");
        return;
      }
      this.$emit("update:show", false);
      this.$emit("event-submit", {
        oddId: this.odd.odd_id,
        isUseWhiteStrip: this.isUseWhiteStrip,
        flowerTotal: this.flowerTotal,
        expectScore: this.expectScore
      });
      // 清空鲜花数量
      for (let i in this.gifts) {
        this.gifts[i].input = 0;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.modal-cheer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  display: flex;
  justify-content: center;
  align-items: center;
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(#000000, 0.75);
    width: 100%;
    height: 100%;
  }
  .modal-container {
    margin-top: 700upx;
    width: 95%;
  }
  .modal-header {
    background-image: linear-gradient(to right, #eeabd8, #6db7ed);
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 60upx;
    padding-left: 20upx;
    overflow: hidden;
    .modal-close {
      width: 60upx;
      height: 100%;
      text-align: center;
    }
  }
  .modal-body {
    padding: 20upx;
    text-align: center;
    .cheer-body {
      &-title {
        font-size: 20upx;
      }
      &-desc {
        color: #fb7299;
        line-height: 60upx;
        font-size: 24upx;
      }
    }
    .gift {
      width: 95%;
      padding: 10upx;
      border: 1upx solid rgba(#000000, 0.1);
      .gift-image {
        width: 100upx;
        height: 100upx;
        margin: 0 auto;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .gift-flower {
        display: flex;
        justify-content: center;
        align-items: center;
        .gift-flower-num {
          color: #fa8fc6;
          height: 50rpx;
          line-height: 56rpx;
        }
        .gift-flower-img {
          width: 50rpx;
          height: 50rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .modal-body-cogs {
      padding: 20upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cogs-info {
        display: flex;
        align-items: center;
        .expect-label {
          color: #666666;
          font-size: 24upx;
        }
        .expect-score {
          font-size: 32upx;
          color: #fa8fc6;
          margin: 0 10upx;
        }
      }
    }

    .cheer-btn {
      background-color: #fb7299;
      margin: 10rpx auto;
      height: 60rpx;
      width: 160rpx;
      font-size: 30rpx;
      line-height: 60rpx;
      color: #ffffff;
      border-radius: 2500rpx;
      &:active {
        transform: scale(1.1);
      }
      &::after {
        border: none;
      }
    }
    .white-strip {
      font-size: 24upx;
      label {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      checkbox {
        transform: scale(0.5);
      }
      .text {
        color: #666666;
        display: flex;
        align-items: center;
        navigator {
          color: #007aff;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
